<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/vue.js"></script>
		<title></title>
		<style>
			.rect{display: flex;width: 400px;height: 200px;background-color: #e45757;}
			.blue{width: 100px;height: 100px;background: blue;}
			.yellow{width: 100px;height: 100px;background: yellow;}	
		</style>
	</head>
	<body>
		<div id="app">
			<div class="rect" v-on:click="alertRed">
				<div class="blue" v-on:click="alertBlue">我是蓝色区域</div>
				<div class="yellow" v-on:click.stop="alertYellow">我是黄色区域</div>
		</div>
	</div>
	</body>
	<script>
		var vm = new Vue({
			el:'#app',
			data:{},
			methods:{
				alertBlue:function(){
					console.log("blue");
				},
				alertYellow:function(){
					console.log("yellow");
				},
				alertRed:function(){
					console.log("red");
				}
			}
		})	
	</script>
</html>
